---
title: Progress
---

# Progress

A horizontal bar to represent the completion progress of a task

```js
import { Progress } from 'theme-ui'
```

```jsx live=true
<Progress max={1} value={1 / 2}>
  50%
</Progress>
```

## Variants

Progress variants can be defined anywhere in the `theme` object.

```js
// example theme variants
{
  styles: {
    progress: {
      color: 'red',
    },
  },
}
// <Progress variant='styles.progress' />
```
